<!DOCTYPE html>
<html>
<head lang="en">
    <!-- 解决兼容性问题 -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <!-- 浏览器加速支持 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">

    <!-- 爬虫获取 -->
    <meta name="author" content="jerehedu">
    <meta name="keywords" content="bootstrap,css,html">
    <meta name="description" content="jerehedu">

    <style>
        i{
            color: white;
        }
        span{
            font-family: 微软雅黑;
        }
    </style>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="style.css"/>

</head>
<body class="container">
<div class="row">
    <div class="col-sm-9 col-sm-offset-1">
        <div class="col-sm-4" style="min-height:800px;background-color: #1E323B">
            <div class="box1">
                <img src="psb.jpg" alt=""/>
            </div>

            <div class="box2">
                <span>个人信息</span>
                <div class="tip1">
                </div>
            </div>

            <div class="box3">
                <p>
                    <i class="iconfont">&#xe607;</i>
                    <span>年龄：21岁</span>
                </p>
                <p>
                    <i class="iconfont">&#xe603;</i>
                    <span>地址：山东省潍坊市</span>
                </p>
                <p>
                    <i class="iconfont">&#xe601;</i>
                    <span>电话：13188862389</span>
                </p>
                <p>
                    <i class="iconfont">&#xe605;</i>
                    <span>邮箱：453856657@qq.com</span>
                </p>
            </div>

            <div class="box4">
                <span>职业技能</span>
                <div class="tip2">
                </div>
            </div>

            <div class="box5">
                <div class="skill">
                    <p>Photoshop</p>
                    <div class="jiao_empty"></div>
                    <div class="jiao"></div>
                    <div class="jiao"></div>
                    <div class="jiao"></div>
                    <div class="jiao"></div>
                </div>
                <div class="skill">
                    <p>Word</p>
                    <div class="jiao_empty2"></div>
                    <div class="jiao_empty2"></div>
                    <div class="jiao_empty2"></div>
                    <div class="jiao2"></div>
                    <div class="jiao2"></div>
                </div>
                <div class="skill">
                    <p>Excel</p>
                    <div class="jiao_empty3"></div>
                    <div class="jiao3"></div>
                    <div class="jiao3"></div>
                    <div class="jiao3"></div>
                    <div class="jiao3"></div>
                </div>
                <div class="skill">
                    <p>Powerpoint</p>
                    <div class="jiao_empty4"></div>
                    <div class="jiao_empty4"></div>
                    <div class="jiao4"></div>
                    <div class="jiao4"></div>
                    <div class="jiao4"></div>
                </div>
            </div>

            <div class="box6">
                <span>兴趣爱好</span>
                <div class="tip3">
                </div>
            </div>

            <div class="box7">
                <div class="love love1" style="float: left">
                    <i class="iconfont">&#xe606;</i>
                    <p>篮球</p>
                </div>
                <div class="love love2" style="float: left;margin-left: 13px">
                    <i class="iconfont">&#xe600;</i>
                    <p>足球</p>
                </div>
                <div class="love love3" style="float: left;margin-left: 13px">
                    <i class="iconfont">&#xe604;</i>
                    <p>游戏</p>
                </div>
                <div class="love love4" style="float: right;">
                    <i class="iconfont">&#xe602;</i>
                    <p>摄影</p>
                </div>
            </div>
        </div>
        <div class="col-sm-8" style="min-height:1000px;background-color: #E0E1E3">
            <div class="jumbotron">
                <h2>李海通</h2>
                <footer>
                    <span>求职目标：房屋试住员</span>
                </footer>
            </div>
            <div class="edu">
                <div class="window1">
                    <p>教育背景</p>
                    <div class="chang"></div>
                </div>
                <div class="window2">
                    <div class="yuan"></div>
                    <span>2013.09-2017.06</span>
                    <p>计算机科学与技术本科</p>
                    <p>烟台大学</p>
                </div>
                <div class="window3">
                    <p>主修课程</p>
                    <p>c语言程序设计.windows程序设计.编译原理.单片机技术.电路电子技术.多媒体技术.高级语言程序设计.计算方法.计算机操作系统.计算机接口技术.计算机图形学.计算机网络.计算机系统结构.计算机组成原理</p>
                </div>
                <div class="window2">
                    <div class="yuan"></div>
                    <span>2013.09-2017.06</span>
                    <p>市场营销（双学位）</p>
                    <p>烟台大学</p>
                </div>
                <div class="window3">
                    <p>主修课程</p>
                    <p>基本会计.统计学.市场营销.国际市场营销.市场调查与预测.商业心理学.广告学.公共关系学.货币银行学.经济法.国际贸易.经济数学.计算机应用</p>
                </div>
            </div>
            <div class="work">
                <div class="window1">
                    <p>工作经历</p>
                    <div class="chang2"></div>
                </div>
                <div class="window2">
                    <div class="yuan"></div>
                    <span>2015.06-2015.08</span>
                    <p>杰瑞数字</p>
                    <p>前端开发工程师</p>
                </div>
                <div class="window3">
                    <p>1.按照客户要求设计程序</p>
                    <p>2.负责公司户外媒体文字编辑</p>
                </div>
                <div class="window2">
                    <div class="yuan"></div>
                    <span>2015.06-2015.08</span>
                    <p>锐捷数字</p>
                    <p>媒介专员</p>
                </div>
                <div class="window3">
                    <p>1.负责公司内部业务系统的设计和改进，参与公司网上商城系统产品功能设计及实施工作</p>
                    <p>2.负责客户调研，客户需求分析，方案写作等工作，参与公司多个大型电子商务项目的策划工作</p>
                </div>
            </div>
            <div class="my">
                <div class="window1">
                    <p>自我评价</p>
                    <div class="chang3"></div>
                </div>
                <ul>
                    <li>我灵感丰富，热情洋溢，善于沟通乐于学习</li>
                    <li>我勤于动手，执行力强，愿意亲手实现自己的每一个想法</li>
                    <li>我性格坚毅，沉稳不屈，可以迎接任何挑战</li>
                    <li>我乐于学习，充满好奇，愿意接受并使用新知识新观点</li>
                </ul>
            </div>
            <div class="my">
                <div class="window1">
                    <p>技能证书</p>
                    <div class="chang4"></div>
                </div>
                <ul>
                    <li>CET-6,优秀的听说读写能力</li>
                    <li>计算机二级，熟悉计算机的各项操作</li>
                    <li>高级营销员，国家职业资格四级</li>
                </ul>
            </div>
            <div class="my">
                <div class="window1">
                    <p>奖项荣誉</p>
                    <div class="chang5"></div>
                </div>
                <ul>
                    <li>2009.10获国家奖学金</li>
                    <li>2010.10获“三好学生”称号</li>
                    <li>2010.12华南大学生创意营销大赛一等奖</li>
                    <li>2011.04挑战杯创业计划大赛铜奖</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="bootstrap-3.3.7-dist/js/jquery-3.1.0.min.js" type="text/javascript">
</script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript">
</script>
</body>
</html>